<template>
	<view class="content-baisc-layout">
		<u-navbar :titleSize="34" title="推广" back-icon-color="#000" :border-bottom="false" :background="{
			background:'url(https://resource.lanbaozixun.com/uploads/images/20240629230244437416650.png) no-repeat',
			backgroundSize:'100%'
			}" title-color="#000">
		</u-navbar>
		<view class="u-padding-26 row u-flex-wrap items-stretch">
			<view class="function-item u-text-center u-padding-left-20 u-padding-right-10" :class="{'selected':current == 0}">
				<u-icon name="https://resource.lanbaozixun.com/uploads/images/20240629230901bff2f9578.png" size="100"></u-icon>
				<view class="xs">
					团队招募
				</view>
			</view>
			<view class="function-item u-text-center u-padding-left-10 u-padding-right-10" :class="{'selected':current == 1}" @click="msgHint">
				<u-icon name="https://resource.lanbaozixun.com/uploads/images/20240629230902ffa4a8686.png" size="100"></u-icon>
				<view class="xs">
					产品专区
				</view>
			</view>
			<view class="function-item u-text-center u-padding-left-10 u-padding-right-10" :class="{'selected':current == 2}" @click="msgHint">
				<u-icon name="https://resource.lanbaozixun.com/uploads/images/2024062923090190b052858.png" size="100"></u-icon>
				<view class="xs">
					一码通
				</view>
			</view>
			<view class="function-item u-text-center u-padding-left-10 u-padding-right-20" :class="{'selected':current == 3}" @click="msgHint">
				<u-icon name="https://resource.lanbaozixun.com/uploads/images/202406292309012e4e53201.png" size="100"></u-icon>
				<view class="xs">
					税票采集
				</view>
			</view>
		</view>
		<view class="content-area u-padding-26">
			<team-poster v-if="current == 0"></team-poster>
		</view>
		
		<view v-if="current == 0">
			<view class="subordinate_information u-margin-30 u-padding-bottom-25">
				<image class="subordinate_information_icon" src="https://resource.lanbaozixun.com/uploads/images/20240630221357133528742.png" mode="widthFix"></image>
				<view v-if="invitationUserRecord.length > 0" class="subordinate_information_record_area u-padding-top-15">
					<view class="subordinate_information_record_area_title row u-padding-15">
						<view class="w-1-3 xs">用户名</view>
						<view class="w-1-3 xs u-text-center">手机号</view>
						<view class="w-1-3 xs u-text-right">加入时间</view>
					</view>
					
					<view v-for="(item,index) in invitationUserRecord" :key="index" class="subordinate_information_record_area_item row u-padding-15">
						<view class="w-1-3 xs">{{item.nickname||''}}</view>
						<view class="w-1-3 xs u-text-center">{{item.phone||''}}</view>
						<view class="w-1-3 xs u-text-right">{{item.create_time||''}}</view>
					</view>
				</view>
				<image v-if="invitationUserRecord.length <= 0" class="subordinate_information_placeholder" src="https://resource.lanbaozixun.com/uploads/images/20240630221430dee299394.png" mode="widthFix"></image>
			</view>
			<swipers :isSwiper="false" :pid="10" height="180rpx" padding="0rpx 30rpx 0 30rpx"></swipers>
			<view class="u-text-center u-color-666666 u-padding-top-30 u-padding-bottom-30 xs">
				您是第1449800位访问者
			</view>
		</view>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				current:0,
				invitationUserRecord:[]
			}
		},
		methods:{
			msgHint() {
				this.$u.toast('功能待开放');
			},
		}
	}
</script>
<style lang="scss">
	page{
		
		.content-baisc-layout{
			background: url('https://resource.lanbaozixun.com/uploads/images/20240629230244437416650.png') no-repeat;
			background-size: 100%;
			
			.function-item{
				width: 25%;
				display: flex;
				position: relative;
				align-items: center;
				flex-direction: column;
				justify-content: space-between;
			}
			
			.selected{
				&:before {
					z-index: 1;
					left: calc(50% - 24rpx);
					bottom: -16rpx;
					content: ' ';
					width: 28rpx;
					height: 28rpx;
					position: absolute;
					transform-origin: bottom;
					transform: rotate(136deg);
					background: linear-gradient(43deg, rgba(207, 224, 255, 0.56) 0%, rgba(237, 244, 255, 0.47) 55%, transparent 100%);
					border-left: 2rpx solid rgba(101, 184, 240, 0.24);
					border-bottom: 2rpx solid rgba(101, 184, 240, 0.24);
				}
				
				&::after{
					z-index: 2;
					bottom: -66rpx;
					left: calc(50% - 24rpx);
					content: ' ';
					width: 44rpx;
					height: 40rpx;
					position: absolute;
					background: linear-gradient(180deg, rgba(207, 224, 255, 0.56) 0%, rgba(237, 244, 255, 0.47) 58.09%, rgba(208, 224, 247, 0) 100%);
				}
			}
			
			
			.content-area{
				border-radius: 20rpx;
				background: linear-gradient(180deg, rgba(207, 224, 255, 0.56) 0%, rgba(237, 244, 255, 0.47) 58.09%, rgba(208, 224, 247, 0) 100%);
				border: 1px solid rgba(101, 184, 240, 0.24);
				box-shadow: inset 0px 2px 4px rgba(135, 200, 214, 0.14);
			}
		}
		
		.subordinate_information{
			border-radius: 10rpx 10rpx 0px 0px;
			background: linear-gradient(180deg, rgba(235, 243, 255, 1) 0%, rgba(247, 250, 255, 1) 100%);
			
			border: 1px solid rgba(101, 184, 240, 0.24);
			
			box-shadow:inset 0px 2px 4px  rgba(135, 200, 214, 0.14);
			
			&_icon{
				width: 240rpx;
				display: block;
				margin: -2rpx auto;
			}
			
			&_placeholder{
				width: 140rpx;
				display: block;
				margin: 3vh auto;
			}
			
			&_record_area{
				.w-1-3{
					width: calc(100% / 3);
				}
				
				&_title{
					background: #CFE6FF;
				}
				
				&_item:nth-child(odd){
					background: #E6F2FF;
				}
			}
		}
	}
</style>